import React, { useEffect, useState } from 'react';
import Banner from '../../components/Home/Banner'
import { base_swiper2 } from '../../utils/api'
import '../../styles/Servicecenter.scss'

interface Props {

}
function Servicecenter(props: Props) {
    // 引入组件状态
    var [swiperlist, setSwipertlist] = useState([])
    // 引入组件生命周期函数
    useEffect(() => {
        base_swiper2().then((res) => {
            if (res.data.code == 200) {
                setSwipertlist(res.data.list)
            }
        })
    }, [])
    return (
        <div className='servicecenter'>
            <Banner swiperlist={swiperlist} autoplay={true}></Banner>
            <p>全场景服务（申请开通请咨询 在线客服 或致电 400-666-8888）</p>
            <div className='box'>
                <div>
                    <img src="https://img1.baidu.com/it/u=2882041487,626262867&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" alt="" />
                    <span>在线系统</span>
                </div><div>
                    <img src="https://img1.baidu.com/it/u=2882041487,626262867&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" alt="" />
                    <span>呼叫系统</span>
                </div><div>
                    <img src="https://img1.baidu.com/it/u=2882041487,626262867&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" alt="" />
                    <span>智能场控</span>
                </div><div>
                    <img src="https://img1.baidu.com/it/u=2882041487,626262867&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" alt="" />
                    <span>客服知识库</span>
                </div>
            </div>
        </div>
    );
}

export default Servicecenter;